<template>
  <div>
    <a-modal
      title="修改菜单"
      :visible="dialogVisible"
      :confirm-loading="confirmLoading"
      width="600px"
      okText="确定"
      cancelText="取消"
      @cancel="handleCancel"
      :footer="false"
    >
      <a-form :form="form" :labelCol="{ span: 4 }" @submit="handleUpdate">
        <a-row>
          <a-col :span="24">
            <a-form-item label="上级菜单">
              <a-tree-select
                v-decorator="[
                  'parent',
                  { rules: [{ required: true, message: '' }] },
                ]"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择上级菜单"
                allow-clear
                tree-default-expand-all
                :tree-data="treeData"
                style="width: 80%"
              >
              </a-tree-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="菜单类型">
              <a-radio-group
                name="radioGroup"
                :value="radioValue"
                @change="radioChange"
              >
                <a-radio :value="0">目录</a-radio>
                <a-radio :value="1">菜单</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="菜单图标">
              <a-select
                v-decorator="[
                  'icon',
                  { rules: [{ required: true, message: '' }] },
                ]"
                :open="dropdownVisible"
                :dropdown-style="{ maxHeight: '240px', overflow: 'auto' }"
                allowClear
                @focus="openDropdown"
                style="width: 80%"
              >
                <div slot="dropdownRender">
                  <icon-picker @selectIcon="selectIcon"></icon-picker>
                </div>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="16">
            <a-form-item label="菜单名称" :labelCol="{ span: 6 }">
              <a-input
                v-decorator="[
                  'name',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 65%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="显示排序" :labelCol="{ span: 11 }">
              <a-input-number
                v-decorator="[
                  'sort',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 45%"
                autocomplete="off"
              >
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="权限标识" :labelCol="{ span: 8 }">
              <a-input
                v-decorator="[
                  'key',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 60%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="路由地址" :labelCol="{ span: 8 }">
              <a-input
                v-decorator="[
                  'url',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 60%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="组件路径" v-if="radioValue">
              <a-input
                v-decorator="[
                  'path',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 80%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item style="margin: 0 15px">
              <a-button type="primary" html-type="submit" block>确定</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { queryMenuList, updateMenu } from "@/api/system/menu";
import IconPicker from "@/components/IconPicker/index";

export default {
  name: "MenuUpdateDialog",
  components: {
    IconPicker,
  },
  data() {
    return {
      dialogVisible: this.$store.getters.dialogUpdateVisible.menu,
      confirmLoading: false,
      form: this.$form.createForm(this),
      radioValue: 0,
      treeData: [],
      dropdownVisible: false,
      pageId: "",
    };
  },
  watch: {
    "$store.getters.dialogUpdateVisible.menu": function (nv) {
      this.dialogVisible = nv;
      queryMenuList().then(({ data }) => {
        let target = data.map((i) => this.mapTree(i));
        this.treeData = [
          {
            title: "顶层菜单",
            key: "top",
            value: "top",
            children: target,
          },
        ];
      });
    },
    "$store.getters.oneMenu": function (nv) {
      this.radioValue = nv.path ? 1 : 0;
      this.pageId = nv._id;
      nv.parent = nv.parent === "" ? "top" : nv.parent;
      setTimeout(() => {
        this.form.setFieldsValue(nv);
      }, 100);
    },
  },
  methods: {
    radioChange(e) {
      this.radioValue = e.target.value;
    },
    handleUpdate(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log(values);
          // 默认 所有菜单 带有超级管理员角色
          values.role = ["1"];
          values.chlidren = [];
          values.parent = values.parent === "top" ? "" : values.parent;
          values.path || (values.path = "");
          values.url || (values.url = "");
          values._id = this.pageId;
          updateMenu(values).then((res) => {
            if (res.data.success) {
              this.$message.success("修改成功！");
              this.$emit("success");
              this.handleCancel();
            } else {
              this.$message.error("修改失败！");
              console.log(res.data.msg);
            }
          });
        }
      });
    },
    handleCancel() {
      this.form.resetFields();
      this.$store.dispatch("SetUpdateVisible", [false, "menu"]);
      this.dropdownVisible = false;
    },
    mapTree(tree) {
      const haveChildren = tree.children.length > 0;
      return {
        title: tree.name,
        value: tree.key,
        key: tree.key,
        children: haveChildren ? tree.children.map((i) => this.mapTree(i)) : [],
      };
    },
    openDropdown() {
      this.dropdownVisible = true;
    },
    selectIcon(value) {
      this.form.setFieldsValue({ icon: value });
      this.dropdownVisible = false;
    },
  },
  mounted() {
    let _this = this;
    window.addEventListener("click", function (e) {
      if (
        e.target.className.includes("ant-modal-body") ||
        e.target.className.includes("ant-col") ||
        e.target.className.includes("ant-form-item-control")
      ) {
        _this.dropdownVisible = false;
      }
    });
  },
};
</script>